<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>项目</span>
            <el-button style="float: right; padding: 3px 0" @click="addProject()" type="text">
              <i class="el-icon-plus" style="margin-right: 15px"></i>
            </el-button>
          </div>
          <el-table
                  border
                  :data="projects"
                  style="width: 100%">
            <el-table-column
                    prop="project_id"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="项目名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="desc"
                    label="项目描述"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="ctime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="180">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editProject(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="configEnv(scope.row)">配置环境</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12" v-show="page.saveModel">
        <el-card class="box-card" style="margin-top: 10px">
          <div slot="header" class="clearfix">
            <span>{{page.modelTitle}}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="showSaveProject(0)">
              <i class="el-icon-close" style="margin-right: 15px"></i>
            </el-button>
          </div>
          <el-form label-width="80px" ref="project" :model="project">
            <el-form-item label="项目名称">
              <el-input v-model="project.name"></el-input>
            </el-form-item>
            <el-form-item label="项目描述">
              <el-input v-model="project.desc" type="textarea"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveProject()">保存</el-button>
              <el-button @click="resetSaveProject()">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12" v-show="page.saveEnvModel">
        <el-card class="box-card" style="margin-top: 10px">
          <div slot="header" class="clearfix">
            <span>{{project.name}} 配置环境</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="showEditProjectEnv(false)">
              <i class="el-icon-close" style="margin-right: 15px"></i>
            </el-button>
          </div>
          <div class="text item" v-if="envs.length === 0">
            <el-row :gutter="20">
              <el-col :span="20">暂时没有环境配置</el-col>
              <el-col :span="4">
                <el-button @click="addEnv(env.project_id)" type="primary"  size="mini"><i class="el-icon-plus"></i></el-button>
              </el-col>
            </el-row>
          </div>
          <div v-for="env in envs" v-if="envs.length > 0" class="text item">
            <el-row :gutter="20">
              <el-col :span="6">{{env.desc}}</el-col>
              <el-col :span="12">{{env.host}}</el-col>
              <el-col :span="6">
                <el-button @click="editEnv(env)" type="success" size="mini"><i class="el-icon-edit"></i></el-button>
                <el-button @click="addEnv(env.project_id)" type="primary"  size="mini"><i class="el-icon-plus"></i></el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="环境配置" :visible.sync="page.saveEnvDialog">
      <el-form label-width="80px">
        <el-form-item label="环境">
          <el-input v-model="env.desc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Host">
          <el-input v-model="env.host" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="IsMaster">
          <el-switch :active-value="1" :inactive-value="0" v-model="env.is_master"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetEnv()">取 消</el-button>
        <el-button type="primary" @click="saveProjectEnv()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    mounted () {
      this.getProjects()
    },
    data () {
      return {
        page: {
          saveModel: 0,
          modelTitle: '',
          saveEnvDialog: false,
          saveEnvModel: false
        },
        envs: [],
        env: {
          id: 0,
          project_id: 0,
          host: '',
          desc: '',
          is_master: 0
        },
        projects: [],
        project: {
          project_id: 0,
          name: '',
          desc: ''
        }
      }
    },
    methods: {
      configEnv (row) {
        this.project.project_id = row.project_id
        this.project.name = row.name
        this.project.desc = row.desc
        this.getProjectEnv(row.project_id)
        this.showEditProjectEnv(true)
        this.showSaveProject(0)
      },
      getProjectEnv (projectId) {
        Vue.http.get('/env/' + projectId).then((response) => {
          this.envs = response.Data
        })
      },
      showEditProjectEnv (isShow) {
        this.page.saveEnvModel = isShow
      },
      showSaveProjectEnv (isShow) {
        this.page.saveEnvDialog = isShow
      },
      saveProjectEnv () {
        if (this.env.id !== 0) {
          Vue.http.put('/env/' + this.env.id, {
            host: this.env.host,
            desc: this.env.desc,
            project_id: this.env.project_id,
            is_master: this.env.is_master
          }).then(_ => {
            this.getProjectEnv(this.env.project_id)
            this.resetEnv()
            this.$store.dispatch('showDialog', '更新成功')
          })
        } else {
          Vue.http.post('/env', {
            host: this.env.host,
            desc: this.env.desc,
            project_id: this.project.project_id,
            is_master: this.env.is_master
          }).then(_ => {
            this.getProjectEnv(this.env.project_id)
            this.resetEnv()
            this.$store.dispatch('showDialog', '添加成功')
          })
        }
      },
      addEnv (projectId) {
        this.resetEnv()
        this.env.project_id = projectId
        this.showSaveProjectEnv(true)
      },
      editEnv (originEnv) {
        this.env.id = originEnv.id
        this.env.host = originEnv.host
        this.env.desc = originEnv.desc
        this.env.project_id = originEnv.project_id
        this.env.is_master = originEnv.is_master
        this.showSaveProjectEnv(true)
      },
      resetEnv () {
        this.env.id = 0
        this.env.host = ''
        this.env.desc = ''
        this.env.project_id = 0
        this.env.is_master = 0
        this.showSaveProjectEnv(false)
      },
      addProject () {
        this.page.modelTitle = '添加项目'
        this.resetSaveProject()
        this.showEditProjectEnv(false)
        this.showSaveProject(1)
      },
      saveProject () {
        let body = {
          name: this.project.name,
          desc: this.project.desc
        }
        if (this.project.project_id !== 0) {
          Vue.http.put('/project/' + this.project.project_id, body).then((response) => {
            this.$store.dispatch('showDialog', '更新成功')
            this.getProjects()
            this.resetSaveProject()
          })
        } else {
          Vue.http.post('/project', body).then((response) => {
            this.$store.dispatch('showDialog', '添加成功')
            this.getProjects()
            this.resetSaveProject()
          })
        }
      },
      editProject (row) {
        this.project.project_id = row.project_id
        this.project.name = row.name
        this.project.desc = row.desc
        this.page.modelTitle = '编辑' + row.name
        this.showEditProjectEnv(false)
        this.showSaveProject(1)
      },
      showSaveProject (isShow) {
        this.page.saveModel = isShow
      },
      resetSaveProject () {
        this.project.project_id = 0
        this.project.name = ''
        this.project.desc = ''
        this.showSaveProject(0)
      },
      getProjects () {
        Vue.http.get('/projects').then((response) => {
          this.projects = response.Data
        })
      }
    }
  }
</script>

<style>
  .item {
    margin-bottom: 18px;
  }
</style>